<template>
  <div class="page-container">
    <a-card :bordered="false" size="small" style="margin-bottom: 10px">
      <a-row :gutter="16">
        <a-col class="search-row" :span="20">
          <a-form layout="inline">
            <a-form-item label="状态">
              <a-select
                size="small"
                v-model:value="queryParams.status"
                placeholder="请选择"
                @change="handleSearch"
              >
                <a-select-option value="正常">正常</a-select-option>
                <a-select-option value="禁用">禁用</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" size="small" @click="handleSearch">查询</a-button>
            </a-form-item>
          </a-form>
        </a-col>
        <!--<a-col class="search-row right-btn-container" :span="4">-->
        <!--  <a-button type="primary" size="small" @click="handleCreate">新增</a-button>-->
        <!--</a-col>-->
      </a-row>
    </a-card>

    <a-table
      :dataSource="dataSource"
      :scroll="{ x: 'max-content' }"
      :columns="columns"
      :pagination="false"
      size="small"
    >
      <template #bodyCell="{ record, column }">
        <template v-if="column.dataIndex === 'status'">
          <a-tag
            v-if="record.status === '正常'"
            style="cursor: pointer"
            color="green"
            @click="handleChangeStatus(record)"
            >{{ record.status }}</a-tag
          >
          <a-tag
            v-if="record.status === '禁用'"
            style="cursor: pointer"
            color="orange"
            @click="handleChangeStatus(record)"
            >{{ record.status }}</a-tag
          >
        </template>
        <template v-if="column.dataIndex === 'operation'">
          <a style="margin-right: 10px" @click="handleEdit(record)">修改</a>
        </template>
      </template>
    </a-table>

    <a-pagination
      v-model:current="queryParams.page"
      v-model:page-size="queryParams.limit"
      style="margin-top: 20px"
      hideOnSinglePage
      showSizeChanger
      :total="total"
      show-less-items
      size="small"
      @change="getList"
    />

    <a-modal v-model:open="visible" :title="title" width="400px" destroy-on-close @ok="handleOk">
      <a-form
        ref="formRef"
        :model="form"
        class="point-form"
        name="pointDetail"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        autocomplete="off"
      >
        <a-form-item
          label="项目名称"
          name="name"
          :rules="[{ required: true, message: '请输入项目名称!' }]"
        >
          <a-input v-model:value="form.name" size="small" />
        </a-form-item>
        <a-form-item
          label="填报周期"
          name="periodType"
          :rules="[{ required: true, message: '请选择填报周期!' }]"
        >
          <a-select
            v-model:value="form.periodType"
            size="small"
            :disabled="title === '编辑'"
            :options="[{ value: '月度' }, { value: '年度' }]"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { projectColumns as columns } from '@/config/columns'
import { createOrUpdateProjectApi, getProjectListApi, setProjectStatusApi } from '@/api/busi'
import { message, Modal } from 'ant-design-vue'
import { createUuid } from '@/utils/encryp'
import useUserStore from '@/stores/user'

const userStore = useUserStore()
const formRef = ref()
const dataSource = ref([])
const total = ref(0)
const queryParams = reactive({
  status: '正常',
  page: 1,
  pageSize: 20
})
const form = reactive({})
const visible = ref(false)
const title = ref('新增')

const getList = () => {
  getProjectListApi(queryParams).then((res) => {
    total.value = res.totleCount
    dataSource.value = res.items
    if (queryParams.status === '正常') {
      userStore.menuList = res.items
    } else {
      userStore.getProjectAll()
    }
  })
}
const handleSearch = () => {
  queryParams.page = 1
  getList()
}
const handleCreate = () => {
  visible.value = true
  title.value = '新增'
  form.name = ''
  form.periodType = ''
  form.id = ''
}
const handleEdit = (row) => {
  visible.value = true
  title.value = '编辑'
  form.name = row.projectName
  form.periodType = row.periodType
  form.id = row.id
}

const handleChangeStatus = (row) => {
  Modal.confirm({
    title: '提示',
    content: `确认${row.status === '正常' ? '禁用' : '恢复'}吗?`,
    onOk: () => {
      setProjectStatusApi({
        ProjectID: row.id,
        status: row.status === '正常' ? '禁用' : '正常'
      }).then(() => {
        // message.success('操作成功')
        getList()
        // row.status = row.status === '正常' ? '禁用' : '正常'
      })
    }
  })
}

const handleOk = () => {
  formRef.value
    .validateFields()
    .then(() => {
      let params = {
        ProjectName: form.name,
        PeriodType: form.periodType,
        Status: '正常'
      }
      if (title.value === '新增') {
        params.Id = createUuid()
      } else {
        params.Id = form.id
      }
      createOrUpdateProjectApi(params).then(() => {
        message.success('操作成功')
        visible.value = false
        getList()
      })
    })
    .catch(() => {})
}

onMounted(() => {
  handleSearch()
})
</script>
